<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=10.0"
    />
    <title>冷弋白的网页</title>
    <link
      href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css"
      rel="stylesheet"
    />
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <style>
      .app {
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }

      button {
        margin: 10px;
      }
    </style>
  </head>

  <body>
    <div class="app">
      <h1>当前数据</h1>
      <p v-show="!a" v-for="(item, index) in data1" :key="index">
        姓名：{{item.name}} | 年龄：{{item.age}} | id：{{item.id}}
      </p>
      <i v-show="a">服务端数据为空</i>
      <i>{{a==false?data2:'未获取数据'}}</i>
      <button v-show="!a" type="button" @click="Fn1" class="btn btn-primary">
        获取信息
      </button>
      <button type="button" @click="Fn2" class="btn btn-warning">
        添加信息
      </button>
      <button v-show="!a" type="button" @click="Fn3" class="btn btn-success">
        修改信息
      </button>
      <button v-show="!a" type="button" @click="Fn4" class="btn btn-danger">
        删除信息
      </button>
      <div v-if="isShow">loading...</div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
    <script type="module">
      import { fn1, fn2, fn3, fn4, fn5, instance } from './a.js';
      let app = new Vue({
        el: '.app',
        data: {
          a: false, //判断服务器是否有内容，没有则false隐藏按钮
          isShow: false,
          data1: '空', //服务端已有的数据
          data2: '空', //手动获取的数据
        },
        methods: {
          //重新请求数据
          fn() {
            axios.get('http://localhost:3000/lyb').then(res => {
              this.data1 = res.data;
              if (this.data1.length == 0) {
                //如果服务器有数据
                this.a = true; //显示能操作数据的按钮
              } else {
                //如果服务器没有数据
                this.a = false; //隐藏能操作数据的按钮
              }
            });
          },

          //获取数据
          Fn1() {
            let id = prompt('请输入你要获取的id');
            let name = prompt('请输入你要获取的信息(name或age)');
            //调用get请求函数
            fn1(id, name).then(res => {
              this.data2 = res.data[name]; //修改手动获取的数据
            });
          },

          //添加数据
          Fn2() {
            const data = {};
            let name = prompt('请输入姓名');
            let age = prompt('请输入年龄');
            data.name = name;
            data.age = age;
            //调用post请求函数
            fn2(data).then(res => {
              console.log(res);
            });
          },

          //更新数据
          Fn3() {
            const key = ['id', 'name', 'age'];
            const value = [];
            const data = {};
            let id = prompt('请输入修改的id');
            let name = prompt('请输入新的名字');
            let age = prompt('请输入新的年龄');
            value.push(id, name, age);
            value.forEach((item, index) => {
              if (item != '') {
                data[key[index]] = item;
              }
            });
            //以上判断修改了哪个值，将修改的值储存在对象内，再将值推送到服务器
            //调用put请求函数
            fn5(data).then(res => {
              this.fn(); //重新加载服务器数据
            });
          },

          //删除数据
          Fn4() {
            let id = prompt('请输入你要删除的id');
            //调用delete请求函数
            fn4(id).then(res => {
              this.fn(); //重新加载服务器数据
            });
          },
        },
        mounted() {
          //绑定请求拦截器
          instance.interceptors.request.use(config => {
            this.isShow = true; //用于显示loading
            return config;
          });

          //绑定响应拦截器
          instance.interceptors.response.use(res => {
            this.isShow = false; //用于隐藏loading
            return res;
          });
          this.fn(); //重新加载服务器数据
        },
      });
    </script>
  </body>
</html>
